<template>
	<div class="theme">
		<van-nav-bar left-arrow @click-left="$router.back(-1)">
			<div slot="title">
				<span v-if="!(status == '打包成功' || status == '打包失败' || status == '已完成')">
				<span>打包倒计时</span>
				<span class="title-line"></span>
				<span v-text="h">0</span> 时
				<span v-text="m">0</span> 分
				<span v-text="s">0</span> 秒
				</span>
			</div>
		</van-nav-bar>
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div class="share-detail-title">
					<div class="share-detail-title-balance">
						<p>可用余额</p>
						<p><span v-text="balance"></span> USDT</p>
					</div>
					<div class="share-detail-title-number">
						<p>No.</p>
						<p>算池编号：<span v-text="$route.params.countPoolCode"></span></p>
					</div>
				</div>
				<div class="share-detail-content">
					<van-cell title="状态">
						<span v-text="status" :style="{color:red ? '#ff4646' : ''}"></span>
					</van-cell>
					<van-cell title="剩余未打包数量">
						<span v-text="remainingNum"></span>
					</van-cell>
					<van-cell title="已打包数量">
						<span v-text="list != null ? list.sharedNum : '0'"></span>
					</van-cell>
					<div class="order-cell">
						<p>
							请输入数量
						</p>
						<p>
							<van-field v-model="num" maxlength="20" class="w-50" disabled @click="showKeyboard = true"></van-field>
						</p>
					</div>
					<div class="order-cell">
						<p>
							请输入交易密码
						</p>
						<p>
							<van-field v-model="password" type="password" maxlength="6" class="password" disabled @click="showKeyboard2 = true"></van-field>
						</p>
					</div>
					<van-cell :style="{zIndex:'999'}">
						<div slot="title">
							收益列表
							<van-icon style="margin-left: 5px;vertical-align: text-top;" name="replay" @click="onRefresh" />
						</div>
						<van-icon :name="listShow ? 'arrow-down' : 'arrow-up'" @click="listShow = !listShow" />
					</van-cell>
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<van-list v-model="loading4" :finished="finished" @load="onLoad" :finished-text="noDate">
							<div class="share-detail-content-list" v-if="listShow">
								<van-row type="flex">
									<van-col span="8">
										<p>参与人</p>
									</van-col>
									<van-col span="8">
										<p>数量</p>
									</van-col>
									<van-col span="8">
										<p>组长</p>
									</van-col>
								</van-row>
								<van-row type="flex" v-for="(el,i) in list2" :key="i">
									<van-col span="8">
										<p v-text="el.nickName"></p>
									</van-col>
									<van-col span="8">
										<p v-text="el.sharedNum"></p>
									</van-col>
									<van-col span="8">
										<p>
											<van-icon :name="el.captain === 2 ? 'success' : 'cross'" />
										</p>
									</van-col>
								</van-row>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
		<van-popup v-model="show" :style="{width:'75%',borderRadius:'5px',padding:'15px 25px'}">
			<div class="outComfirm">
				<div class="outComfirm-title">
					是否退出房间?
				</div>
				<div class="outComfirm-btn">
					<span @click="out">确定</span>
					<span @click="show = false">取消</span>
				</div>
			</div>
		</van-popup>
		<div style="position: fixed;bottom: 0;width: 100%;display: flex;" v-if="status != '打包中'">
			<van-button color="#ff4646" :style="{flex:'1'}" v-if="!list || list.status == 2" @click="joinSharePool" :loading="loading">
				打包
			</van-button>
			<van-button color="#ff4646" :style="{flex:'1'}" v-if="list && list.status == 1" @click="joinSharePool" :loading="loading2">
				追加
			</van-button>
			<van-button color="#f5f5f5" :style="{flex:'1',color:'#000000'}" @click="show = true;" v-if="list && list.status == 1" :loading="loading3">
				退出
			</van-button>
		</div>
		<van-number-keyboard :show="showKeyboard" theme="custom" close-button-text="完成" @input="onInput" @delete="onDelete" @blur="onClose" />
		<van-number-keyboard :show="showKeyboard2" theme="custom" close-button-text="完成" @input="onInput2" @delete="onDelete2" @blur="showKeyboard2 = false" />
	</div>
</template>

<script>
	let _this;
	import { base, home } from './../utils/api';
	import { formatDate } from './../utils/date';
	export default {
		name: 'SharePoolDetails',
		components: {},
		props: {},
		data() {
			return {
				list: [],
				list2: [],
				tab: true,
				orderShow: false,
				showKeyboard: false,
				num: '',
				password: '',
				checked: '',
				value: 0,
				listShow: true,
				balance: '0.0000',
				show: false,
				setIntervalTime: '',
				h: '00',
				m: '00',
				s: '00',
				join: '',
				showKeyboard: false,
				showKeyboard2: false,
				loading: false,
				loading2: false,
				loading3: false,
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading4: false,
				noDate: '没有更多了',
				size: 10,
				status: '',
				red: false,
				remainingNum: '0',
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
					this.getSharedPoolDetailList();
				}, 500);
			},
			onLoad() { // 上拉加载
				// 异步更新数据
				this.getSharedPoolDetailList();
			},
			joinSharePool() {
				if(this.num == '') {
					this.$toast('请输入数量');
					return false;
				}
				if(this.password == '') {
					this.$toast('请输入交易密码');
					return false;
				}
				if(this.password.length != 6) {
					this.$toast('交易密码必须为6位');
					return false;
				}
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						this.loading = true;
						this.loading2 = true;
						home.joinSharedPool({
							'countPoolCode': this.$route.params.countPoolCode,
							'key': this.k,
							'encryptedData': this.rsaEncrypt(this.num + ',' + this.password + ',' + this.v)
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.loading = false;
									this.loading2 = false;
									this.$toast(res.msg);
									this.num = '';
									this.password = '';
									this.getList();
									this.getSharedPoolDetailList();
								}, 500)
							} else if(res.code == 500) {
								this.loading = false;
								this.loading2 = false;
								this.$toast(res.msg);
								this.getList();
							} else {
								this.loading = false;
								this.loading2 = false;
								this.$toast(res.msg);
								this.getList();
							}
						})
					}
				})
			},
			onInput(val) {
				if(this.num.includes('.') && val === '.') {
					return false;
				}
				if(this.num.indexOf('.') != -1 && this.num.indexOf('.') + 4 < this.num.length) {
					return false;
				}
				this.num += val;
			},
			onDelete() {
				this.num = this.num.slice(0, -1)
			},
			onInput2(val) {
				if(this.password.length == 6) {
					return false;
				}
				this.password += val;
			},
			onDelete2() {
				this.password = this.password.slice(0, -1)
			},
			onClose() {
				this.showKeyboard = false;
				Number(this.num) > Number(this.balance) ? this.num = this.balance : '';
			},
			getList() {
				this.status = '';
				home.getSharedPoolDetail({
					countSharedPoolId: this.$route.params.countSharedPoolId
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data;
						if(this.list !== null && this.list.status == 2) {
							this.status = this.list.remark;
							this.red = true;
						} else {
							this.status = this.formatStatus(this.$route.params.status);
						}
					}
				})
				base.getMyInfo().then(res => {
					this.balance = parseFloat(res.data.availableNum).toFixed(5).slice(0, -1);
				})
			},
			getSharedPoolDetailList() {
				home.getSharedPoolDetailList({
					current: 1,
					size: this.size,
					countSharedPoolId: this.$route.params.countSharedPoolId
				}).then(res => {
					if(res.code == 200) {
						this.noDate = '没有更多了';
						this.list2 = res.data.records;
						if(this.list2 == '') {
							this.noDate = '暂无数据';
						}
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading4 = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading4 = false;
						}
					}
				})
			},
			formatStatus(status) {
				switch(Number(status)) {
					case 1:
						return '待打包';
						break;
					case 2:
						return '打包中';
						break;
					case 3:
						return '打包成功';
						break;
					case 4:
						return '打包失败';
						break;
					case 5:
						return '已完成';
						break;
				}
			},
			out() {
				this.show = false;
				this.loading3 = true;
				home.exitSharedPool({
					countSharedPoolId: this.$route.params.countSharedPoolId
				}).then(res => {
					if(res.code == 200) {
						this.$toast(res.msg);
						this.getList();
						home.getSharedPool({
							countSharedPoolId: this.$route.params.countSharedPoolId
						}).then(res => {
							if(res.code == 200) {
								this.time = res.data.expirationDate;
								this.remainingNum = res.data.remainingNum;
								this.countTime(true);
								this.setIntervalTime = setInterval(() => {
									this.countTime(false);
								}, 1000)
							}
						})
						this.getSharedPoolDetailList();
						this.loading3 = false;
					} else {
						this.loading3 = false;
						this.$toast(res.msg);
					}
				})
			},
			countTime(bl) {
				let leftTime = new Date(this.time) - new Date();
				if(leftTime >= 0) {
					this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					this.m = Math.floor(leftTime / 1000 / 60 % 60);
					this.s = Math.floor(leftTime / 1000 % 60);
				} else {
					clearInterval(this.setIntervalTime);
					if(!bl) {
						return false;
					}
					const toast = this.$toast.loading({
						duration: 0, // 持续展示 toast
						forbidClick: true,
						message: ' 3 秒\n打包倒计时'
					});

					let second = 3;
					const timer = setInterval(() => {
						second--;
						if(second) {
							toast.message = ` ${second} 秒\n打包倒计时`;
						} else {
							clearInterval(timer);
							// 手动清除 Toast
							this.$toast.clear();
							this.getList();
							home.getSharedPool({
								countSharedPoolId: this.$route.params.countSharedPoolId
							}).then(res => {
								if(res.code == 200) {
									this.time = res.data.expirationDate;
									this.remainingNum = res.data.remainingNum;
								}
							})
						}
					}, 1000);
				}
			},
		},
		created() {},
		mounted() {
			this.getList();
			home.getSharedPool({
				countSharedPoolId: this.$route.params.countSharedPoolId
			}).then(res => {
				if(res.code == 200) {
					this.time = res.data.expirationDate;
					this.remainingNum = res.data.remainingNum;
					this.countTime(true);
					this.setIntervalTime = setInterval(() => {
						this.countTime(false);
					}, 1000)
				}
			})
		},
		destroyed() {
			clearInterval(this.setIntervalTime);
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		}
	};
</script>

<style lang="less" scoped>
	.overlay {
		bottom: 64px;
	}
	
	.overlay-content {
		padding: 10px;
		.share-detail-title {
			.share-detail-title-balance {
				font-size: 15px;
				color: #59595b;
				padding: 10px;
				color: #59595b;
				border-bottom: 1px solid #f4b56b;
			}
			.share-detail-title-number {
				padding-bottom: 15px;
				padding-top: 20px;
				border-bottom: 1px solid #f4b56b;
				padding-left: 5px;
				p:first-child {
					font-size: 35px;
					padding: 0 0px 5px 5px;
				}
				p:not(:first-child) {
					font-size: 15px;
				}
			}
		}
		.share-detail-content {
			.van-cell {
				padding: 15px 5px 0;
			}
			.van-cell:not(:last-child)::after {
				border-bottom: 0;
			}
			.share-detail-content-list {
				margin-top: 15px;
				text-align: center;
				background: #73c5cf;
				padding: 20px 10px;
				border-radius: 5px;
				color: #FFFFFF;
				font-size: 14px;
				.van-row:first-child {
					color: #316167;
					margin-bottom: 10px;
				}
				/deep/.van-cell__value {
					color: #999999;
				}
			}
			.order-cell {
				padding: 15px 5px 0px;
				margin-bottom: 0px;
				color: #323233;
				p {
					padding-bottom: 12px;
				}
				p:not(:first-child) {
					padding-bottom: 0;
				}
				.van-cell {
					background-color: #f5f5f5;
					padding: 5px 16px;
					border-radius: 5px;
				}
				.password {
					/deep/.van-field__control {
						text-align: center;
					}
				}
				/deep/.van-checkbox__label {
					color: #44add5;
				}
			}
		}
	}
	
	/deep/ .van-nav-bar {
		background-color: #FFFFFF;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: #999999;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0px;
	}
	
	.van-nav-bar__left {
		left: 8px;
	}
	
	.w-50 {
		width: 50%;
	}
	
	.van-nav-bar__title {
		font-size: 14px;
		color: #FFFFFF;
		max-width: 100%;
		span {
			background: #ff4646;
			padding: 5px 10px;
			border-radius: 15px;
			span:first-child {
				padding: 0 !important;
			}
			span:not(:first-child) {
				color: #f8d92b;
				padding: 0 5px;
			}
		}
		.title-line {
			padding: 0 0 0 5px !important;
			margin-right: 5px;
			width: 1px;
			border-right: 1px solid #FFFFFF;
			border-radius: 0;
		}
	}
	
	.outComfirm-title {
		padding-bottom: 50px;
	}
	
	.outComfirm-btn {
		float: right;
		span {
			margin-left: 40px;
		}
		span:first-child {
			color: #ff4646;
		}
	}
	
	.van-popup--center {
		top: 40%;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
</style>